<template>
  <div style="display: none">
    <iframe
      v-if="visible"
      :id="id"
      :src="url"
      frameborder="0"
      width="100%"
      height="550px"
      scrolling="auto"
      @load="onIframeLoad"
    >
    </iframe>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { setTimeout } from 'timers'

export default {
  name: 'PdfPreviewModal',
  data() {
    return {
      url: window._CONFIG['pdfDomainURL'],
      id: 'pdfPreviewIframe',
      headers: {},
      visible: false,
      title: '',
      token: ''
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN)
    this.headers = { 'X-Access-Token': token }
  },
  computed: {

  },
  mounted() {
    window.addEventListener('message', this.handleScanFileMessage)
  },
  methods: {
    handleScanFileMessage(event) {
      // 根据上面制定的结构来解析iframe内部发回来的数据
      const data = event.data
      console.log('----', data)
    },
    previewFiles(title, token) {
      this.visible = true
      this.title = title
      this.token = token
    },
    onIframeLoad() {
      this.$emit('onload')
      var iframe = document.getElementById('pdfPreviewIframe')
      var json = { 'title': this.title, 'token': this.token }
      iframe.contentWindow.postMessage(json, '*')
      setTimeout(() => {
        this.visible = false
      }, 1000)
    }
  }
}
</script>

<style scoped>

</style>
